<template>
  <div style="margin-top: 5px">
    <dv-border-box-8 style="height: 70px;width: 400px;margin: 0 auto;text-align: center
;line-height: 70px;font-size: 20px;">模型列表
    </dv-border-box-8>
    <div style="overflow: scroll;max-height:120px;margin-top: 20px;">
      <dv-decoration-11 style="width:400px;height:40px;margin: 10px auto"
                        v-for="(item, index) in modules" :key="index">
        <div class="demo">
          <div style="text-align :center;font-size: 20px;width: 300px" @click="selectModule(item)"
               :class="{'selected': item.selected}">
            {{ item.name }}
          </div>
        </div>
        <!--        <el-button @click="deleteCurData(item)">删除</el-button>-->
        <i class="el-icon-close" @click="deleteCurData(item)" style="cursor: pointer"></i>

      </dv-decoration-11>
    </div>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="确认选择" width="30%">
      <span>您确定要选择{{ currentModuleName }}模型吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogDeleteVisible" :append-to-body="true" title="确认选择" width="30%">
      <span>您确定要删除{{ currentModuleName }}数据吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {deleteModel, getModelData} from "@/api/model";
export default {
  props: {
    modules: {
      type: Array,
      required: false,
    }
  },
  mounted() {
    this.$bus.$on("removecolor", () => {
      this.modules.forEach(item => {
        item.selected = false;
      });
    })
  },
  beforeDestroy() {
    this.$bus.$off("removecolor")
  },
  data() {
    return {
      currentModuleName: '', // 当前选中的模块名称
      dialogVisible: false,// 是否显示确认选择的模态框
      dialogDeleteVisible: false,
      currentItem: {},//当前选中的对象
    };
  },
  methods: {
    deleteCurData(item) {

      this.currentModuleName = item.name
      this.dialogDeleteVisible = true
      this.currentItem = item
    },
    confirmDelete() {
      let model_id = this.currentItem.id
      //删除模型 todo
      deleteModel(model_id).then(res => {
        if (res != null) {
          this.$message.info('删除成功')
        }
        //todo 获取到模型
        getModelData().then(res => {
          this.dialogDeleteVisible = false
          this.$bus.$emit("reloadModelData", res.data.msg)
        })
      })
    },
    selectModule(module) {
      //设置模型的名字
      if (module.selected) {
        module.selected = false; // 如果该模块已被选中，则将其 selected 属性设为 false
        return; // 直接返回
      }
      // 显示确认选择的模态框
      this.dialogVisible = true;
      this.currentModuleName = module.name;


      this.$store.state.selectmodel = module
      this.$bus.$emit("getSelectedModel", module)
      // 遍历模块列表，将所有未被选中的模块的 selected 属性设为 false
      for (let i = 0; i < this.modules.length; i++) {
        if (this.modules[i].selected && this.modules[i] !== module) {
          this.modules[i].selected = false;
        }
      }
    },
    confirmSelection() {
      // 隐藏确认选择的模态框
      this.dialogVisible = false;
      // 将当前选中的模块设置为选中状态
      for (let i = 0; i < this.modules.length; i++) {
        this.modules[i].selected = this.modules[i].name === this.currentModuleName;
      }
      // 显示提示框
      this.$message(`${this.currentModuleName}模型被选中！`);
    }
  }
};
</script>

<style scoped>
.demo :hover {
  cursor: pointer;
  background-color: #1a5cd7;
}

.selected {
  background: #1a5cd7; /* 修改背景颜色 */
}

::-webkit-scrollbar {
  width: 0vh;
  height: 0vh;
}
</style>
